<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload=function(){
      // 1.获取div节点
      var div=document.getElementsByTagName('div')[0];
      // 获取元素公共属性
      console.log(div.className,'获取类名');
      console.log(div.id,'获取id');
      console.log(div.title,'获取title');
      console.log(div['title'],'获取title');
      // 获取自定义属性 --无效 点访问法
      console.log(div.flag,'获取自定义属性');//undefiend
      // 获取自定义属性(建议使用data-) getAttribute --有效
      console.log(div.getAttribute('data-flag'));
      console.log(div.getAttribute(['data-flag']));
      // 设置属性
      div.setAttribute('data-flag','我是自定义属性');
      div.setAttribute('id','id-test');
      console.log(div);
      // 声明一下test方法
      
      // .style .onclick 返回的函数或者对象
      console.log(div.style,'返回的函数或者对象');
      console.log(div.onclick,'返回的函数或者对象');
      // 使用getAttribute返回的是字符串
      console.log(div.getAttribute('style','返回的是字符串'))
      console.log(div.getAttribute('onclick','返回的是字符串'));
      // 移除属性
      div.removeAttribute('title')
      console.log(div);
    }
  </script>
</head>
<body>
  <div onclick="test()" style="height: 100px;background-color:red;" class="one" id="two" title="我是一个div" data-flag="testflag">我是一个div</div>
  <script>
    function test(){
        console.log(1);
        // alert('我被点击了')
      }
  </script>
</body>
</html>